<!DOCTYPE html>
<html lang="zh-en">
<head>
  <title>haopXpycary's memories</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  <meta charset="utf-8" /> 
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> 
  <link rel="stylesheet" type="text/css" href="../moubles/firefox_css.css" />
  <link rel="stylesheet" type="text/css" href="./../index.css" />
  <style>
    img {
        display: none;
        padding: 2px 4px;
    }
  </style>
</head>

<script>
    function show(num) {
        gf_img_list = document.getElementsByClassName('gf'+num.toString())
        if (gf_img_list) {
            for (i=0;i<gf_img_list.length;i++) {
                console.log("The [object HTMLImageElement] "+(num+1).toString()+'-'+(i+1).toString()+" was displayed.")
                gf_img_list[i].style.display = 'block';
            }
        }
    }
</script>

<body>
  <h3> 前任博物馆 </h3>
  <i class="sent">Click on the text to view the image.</i>
  <br /><br />
  <p class="sentence" onclick="show(0)">名义上的第一任</p>
  <img class="gf0"  width="300" style="text-align:center" src="../jpg/0.0" alt="加载中..."/>
  <p class="sentence" onclick="show(1)">第二任</p>
  <img class="gf1" width="300" style="text-align:center" src="../jpg/1.0" alt="加载中..."/>
  <img class="gf1" width="300" style="text-align:center" src="../jpg/1.1" alt="加载中..."/>
  <img class="gf1" width="300" style="text-align:center" src="../jpg/1.2" alt="加载中..."/>
  <img class="gf1" width="300" style="text-align:center" src="../jpg/1.3" alt="加载中..."/>
  <p class="sentence" onclick="show(2)">第三任，暂时没有照片</p>
  <img class="gf2" width="300" style="text-align:center" src="../jpg/2.0"/>
  <p class="sentence" onclick="show(3)" >第四任</p>
  <img class="gf3" width="300" style="text-align:center" src="../jpg/3.0" alt="加载中..."/>
</body>
</html>